var myApp = angular.module('jsGallery', ['ngAnimate']);
myApp.factory('achievementTypeFactory', function() {
    var factoryInstance = {};

    factoryInstance.translateAchievementTitle = function(title) {
        if (title == "earned") {
            return "Earned";
        } else if (title == "locked") {
            return "Locked";
        } else if (title == "locked_bad") {
            return "Locked Negative";
        } else {
//            alert("Invalid title found!");
            return title;
        }
    };

    return factoryInstance;
});
myApp.factory('setupJssor', function () {
    var factoryInstance = {};

    factoryInstance.options = function(id, photoData) {
        var output = {
            $ArrowKeyNavigation: true,   			            //[Optional] Allows keyboard (arrow key) navigation or not, default value is false
            $SlideDuration: 500,                                //[Optional] Specifies default duration (swipe) for slide in milliseconds, default value is 500
            $MinDragOffsetToSlide: 20,                          //[Optional] Minimum drag offset to trigger slide , default value is 20
            //$SlideWidth: 600,                                 //[Optional] Width of every slide in pixels, default value is width of 'slides' container
            //$SlideHeight: 300,                                //[Optional] Height of every slide in pixels, default value is height of 'slides' container
            $SlideSpacing: 0, 					                //[Optional] Space between each slide in pixels, default value is 0
            $DisplayPieces: 1,                                  //[Optional] Number of pieces to display (the slideshow would be disabled if the value is set to greater than 1), the default value is 1
            $ParkingPosition: 0,                                //[Optional] The offset position to park slide (this options applys only when slideshow disabled), default value is 0.
            $UISearchMode: 1,                                   //[Optional] The way (0 parellel, 1 recursive, default value is 1) to search UI components (slides container, loading screen, navigator container, arrow navigator container, thumbnail navigator container etc).
            $PlayOrientation: 1,                                //[Optional] Orientation to play slide (for auto play, navigation), 1 horizental, 2 vertical, default value is 1
            $DragOrientation: 3,                                //[Optional] Orientation to drag slide, 0 no drag, 1 horizental, 2 vertical, 3 either, default value is 1 (Note that the $DragOrientation should be the same as $PlayOrientation when $DisplayPieces is greater than 1, or parking position is not 0)

            $BulletNavigatorOptions: {                                //[Optional] Options to specify and enable navigator or not
                $Class: $JssorBulletNavigator$,                       //[Required] Class to create navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $ActionMode: 1,                                 //[Optional] 0 None, 1 act by click, 2 act by mouse hover, 3 both, default value is 1
                $AutoCenter: 2,                                 //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
                $Lanes: Math.ceil(photoData[id].length / 8),                                      //[Optional] Specify lanes to arrange items, default value is 1
                $SpacingX: 10,                                  //[Optional] Horizontal space between each item in pixel, default value is 0
                $SpacingY: 10,                                  //[Optional] Vertical space between each item in pixel, default value is 0
                $Orientation: 2                                 //[Optional] The orientation of the navigator, 1 horizontal, 2 vertical, default value is 1
            },

            $ArrowNavigatorOptions: {
                $Class: $JssorArrowNavigator$,              //[Requried] Class to create arrow navigator instance
                $ChanceToShow: 2,                               //[Required] 0 Never, 1 Mouse Over, 2 Always
                $AutoCenter: 0                                  //[Optional] Auto center navigator in parent container, 0 None, 1 Horizontal, 2 Vertical, 3 Both, default value is 0
            }
        };
        return output;
    };

    factoryInstance.setup = function (ids, photoData) {
        //responsive code begin
        //you can remove responsive code if you don't want the slider scales while window resizes
        function ScaleSliders(slider) {
            var parentWidth1 = slider.$Elmt.clientWidth;
            if (parentWidth1) {
                slider.$SetScaleWidth(Math.min(parentWidth1, 800));
            }
//            else {
//                window.setTimeout(ScaleSliders(slider), 30);
//            }
        }

        for (var i = 0; i < ids.length; i++) {
            var jssorSlider = new $JssorSlider$(ids[i], factoryInstance.options(ids[i], photoData));
            ScaleSliders(jssorSlider);
        }

    };

    return factoryInstance;
});
myApp.controller('photoController', function ($scope, $http, $timeout, setupJssor, achievementTypeFactory) {
    $scope.titles = [];
    $scope.photos = {};
    $scope.loading = true;
    $scope.teamData = [];
    $scope.showTeamScore = false;
    $scope.noAchievements = false;
    $http({
        method: 'POST',
        url: 'ajax/processor',
        data: {
            command: 'getAchievements'
        }
    }).then(function (res) {
        var gatheredStatuses = [];
        var photoData = {};
        for (var i = 0; i < res.data[0].length; i++) {
            var curStatus = res.data[0][i].status;
            if (photoData[curStatus] === undefined) {
                photoData[curStatus] = [];
                gatheredStatuses.push(res.data[0][i].status);
            }
            photoData[curStatus].push(res.data[0][i]);
        }
        var groupDataTemp = [];
        for (var j = 1; j < res.data.length; j++) {
            groupDataTemp.push(res.data[j]);
        }
        $scope.teamData = groupDataTemp;
        $scope.photos = photoData;
        if ($.isEmptyObject(photoData)) {
            $scope.noAchievements = true;
        }
        $timeout(function () {
            setupJssor.setup(gatheredStatuses, photoData);
            $scope.loading = false;
        }, 100);
    });

    $scope.translateTitle = function(title) {
        return achievementTypeFactory.translateAchievementTitle(title);
    };

    $scope.getNumber = function(number) {
        return new Array(number);
    };

    $scope.toggleTeamScore = function() {
        $scope.showTeamScore = !$scope.showTeamScore;
    }
});